<template>
  <div class="queryCriteria">
    <div class="step1_header">
      <el-popover placement="right" width="400" trigger="click" title="批量操作" ref="popover">
        <div style="margin-bottom: 12px">
          <span style="
              font-size: 14px;
              display: inline-block;
              width: 80px;
              text-align: right;
              color: #333;
              font-weight: bold;
              margin-right: 12px;
            ">是否显示</span><el-radio-group v-model="operateMore.quHidden">
            <el-radio label="NO">是</el-radio>
            <el-radio label="YES">否</el-radio>
          </el-radio-group>
        </div>
        <div style="margin-bottom: 12px">
          <span style="
              font-size: 14px;
              display: inline-block;
              width: 80px;
              text-align: right;
              color: #333;
              font-weight: bold;
              margin-right: 12px;
            ">是否必填</span><el-radio-group v-model="operateMore.must">
            <el-radio label="YES">是</el-radio>
            <el-radio label="NO">否</el-radio>
          </el-radio-group>
        </div>
        <div style="margin-bottom: 12px">
          <span style="
              font-size: 14px;
              display: inline-block;
              width: 80px;
              text-align: right;
              color: #333;
              font-weight: bold;
              margin-right: 12px;
            ">宽度</span><el-input-number v-model="operateMore.quWidth" :min="6" :max="12"></el-input-number>
        </div>
        <div style="display: flex; justify-content: flex-end">
          <el-button type="primary" style="background: #2f54eb" size="small"
            @click="() => handleAlllMore()">确定</el-button>
        </div>
        <el-button type="primary" slot="reference" style="background: #2f54eb;" size="small">批量操作</el-button>
      </el-popover>
    </div>
    <div class="table">
      <el-table :data="list_step1" border style="width: 100%" size="mini" row-key="label" key="queryCriteria"
        ref="multipleTable" class="step1Table">
        <el-table-column prop="date" label="序号" width="55" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="label" label="列名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.label }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="opt" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">查询操作符</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div v-clickoutside="() => handleClickOutside(scope, 'opt')">
              <p v-show="!scope.row[`isShow${'opt'}`]" class="tr_txt" @click="() => handleInputEdit(scope, 'opt')">
                {{
                  selectDictLabel(
                    dict.type.pt_app_page_query_type,
                    scope.row.opt
                  )
                }}
              </p>
              <div v-show="scope.row[`isShow${'opt'}`]">
                <el-select v-model="scope.row.opt" :popper-append-to-body="false" popper-class="selectClass"
                  style="width: 100%">
                  <el-option v-for="item in dict.type.pt_app_page_query_type" :key="item.id" :label="item.label"
                    :value="item.value" />
                </el-select>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">默认查询值</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div class="clickoutsideClass" v-clickoutside="() => handleClickOutside(scope, 'value')">
              <p v-show="!scope.row[`isShow${'value'}`]" class="tr_txt" @click="() => handleInputEdit(scope, 'value')">
                {{ scope.row.value }}
              </p>
              <el-input v-show="scope.row[`isShow${'value'}`]" v-model="scope.row.value" clearable />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="ruleValue" label="" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">数据规则</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div class="clickoutsideClass" v-clickoutside="() => handleClickOutside(scope, 'ruleValue')">
              <p v-show="!scope.row[`isShow${'ruleValue'}`]" class="tr_txt"
                @click="() => handleInputEdit(scope, 'ruleValue')">
                {{ scope.row.ruleValue }}
              </p>
              <el-input v-show="scope.row[`isShow${'ruleValue'}`]" v-model="scope.row.ruleValue" clearable
                placeholder="多个值用，隔开" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="componentType" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">组件类型</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div v-clickoutside="() => handleClickOutside(scope, 'componentType')">
              <p v-show="!scope.row[`isShow${'componentType'}`]" class="tr_txt"
                @click="() => handleInputEdit(scope, 'componentType')">
                {{
                  selectDictLabel(
                    dict.type.pt_app_page_component_type,
                    scope.row.componentType
                  )
                }}
              </p>
              <div v-show="scope.row[`isShow${'componentType'}`]">
                <el-select v-model="scope.row.componentType" :popper-append-to-body="false" popper-class="selectClass"
                  style="width: 100%" @change="(value) => handleQuTypeChange(value, scope)">
                  <el-option v-for="item in dict.type.pt_app_page_component_type" :key="item.id" :label="item.label"
                    :value="item.value" />
                </el-select>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="quType" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">数据类型</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div v-clickoutside="() => handleClickOutside(scope, 'quType')">
              <p v-show="!scope.row[`isShow${'quType'}`]" class="tr_txt" @click="() => handleInputEdit(scope, 'quType')">
                {{
                  selectDictLabel(
                    dict.type.pt_app_page_data_type,
                    scope.row.quType
                  )
                }}
              </p>
              <div v-show="scope.row[`isShow${'quType'}`]">
                <el-select v-model="scope.row.quType" :popper-append-to-body="false" popper-class="selectClass"
                  style="width: 100%">
                  <el-option v-for="item in dict.type.pt_app_page_data_type" :key="item.id" :label="item.label"
                    :value="item.value" />
                </el-select>
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="hidden" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">是否展开</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div>
              <el-checkbox-group v-model="scope.row.hidden">
                <el-checkbox true-label="YES" false-label="NO"></el-checkbox>
              </el-checkbox-group>
            </div>
          </template>
        </el-table-column> -->
        <el-table-column prop="quHidden" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">是否显示</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div>
              <el-checkbox-group v-model="scope.row.quHidden" @change="(val) => handleQuHiddenChange(val, scope.row)">
                <el-checkbox true-label="NO" false-label="YES"></el-checkbox>
              </el-checkbox-group>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="must" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">是否必填</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div>
              <el-checkbox-group v-model="scope.row.must">
                <el-checkbox true-label="YES" false-label="NO"></el-checkbox>
              </el-checkbox-group>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="quWidth" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">宽度</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div v-clickoutside="() => handleClickOutside(scope, 'quWidth')">
              <p v-show="!scope.row[`isShow${'quWidth'}`]" class="tr_txt"
                @click="() => handleInputEdit(scope, 'quWidth')">
                {{ scope.row.quWidth }}
              </p>
              <div v-show="scope.row[`isShow${'quWidth'}`]">
                <el-input-number v-model="scope.row.quWidth" :min="6" :max="12" placeholder="宽度6~12"
                  style="width: 150px"></el-input-number>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="optionSql" label="" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">选项SQL</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div class="clickoutsideClass" v-clickoutside="() => handleClickOutside(scope, 'optionSql')">
              <p v-show="!scope.row[`isShow${'optionSql'}`]" class="tr_txt"
                @click="() => handleInputEdit(scope, 'optionSql')">
                {{ scope.row.optionSql }}
              </p>
              <el-input v-show="scope.row[`isShow${'optionSql'}`]" v-model="scope.row.optionSql" clearable />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="formatName" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">数据转换配置</span>
            </div>
          </template>
          <template slot-scope="scope">
            <el-button size="mini" :class="[
              scope.row.formatQ || scope.row.multiple ? 'isData' : null,
            ]" @click="handleDataConfig(scope)" :disabled="![
    'dic',
    'input-date',
    'input-date-range',
    'dept',
    'user',
    'custom',
  ].includes(scope.row.componentType)
  ">配置</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Clickoutside from "element-ui/src/utils/clickoutside";
export default {
  name: "queryCriteria",
  directives: {
    Clickoutside,
  },
  dicts: [
    "pt_app_page_query_type",
    "pt_app_page_component_type",
    "pt_app_page_data_type",
  ],
  data() {
    return {
      columnNameRules: "",
      list_step1: [],
      configIndex: undefined,
      operateMore: {},
    };
  },
  props: {
    dataConfigOpenFun: {
      type: Function,
      default: () => { },
    },
    dataConfigClose: {
      type: Function,
      default: () => { },
    },
  },

  mounted() {
    if (sessionStorage.getItem("pageModel")) {
      const step2 = JSON.parse(sessionStorage.getItem("pageModel"))?.step2;
      if (step2 && step2?.length) {
        this.list_step1 = step2;
      }
    }
  },

  methods: {
    handleAlllMore() {
      this.$refs.popover.doClose();
      this.list_step1.forEach((item) => {
        for (let key in this.operateMore) {
          if (this.operateMore[key]) {
            item[key] = this.operateMore[key];
          }
        }
      });
    },
    getConfigData(type, value,other) {
      if (value) {
        if (type === "input-date" || type === "input-date-range") {
          this.$set(this.list_step1, this.configIndex, {
            ...this.list_step1[this.configIndex],
            formatQ: value.dateTypeFormat,
            datQ: value.datQ,
          });
        }
        if (type === "dic") {
          this.$set(this.list_step1, this.configIndex, {
            ...this.list_step1[this.configIndex],
            formatQ: value.dictType,
            formatTypeQ: value.activeName,
            formatNameQ: value.dictName,
            multiple: value.multiple
          });
        }
        if (type === "dept" || type === "user") {
          this.$set(this.list_step1, this.configIndex, {
            ...this.list_step1[this.configIndex],
            multiple: value.multiple,
            customConfig: JSON.stringify(value.customConfig ? value.customConfig : {})
          });
        }
        if (type === "custom") {
          this.$set(this.list_step1, this.configIndex, {
            ...this.list_step1[this.configIndex],
            formatQ: value,
            multiple:other.multiple
          });
        }
      }
      this.dataConfigClose();
    },
    handleQuTypeChange(value, scope) {
      if (
        value !== "dic" &&
        value !== "input-date" &&
        value !== "input-date-range" &&
        value !== "custom"
      ) {
        this.$set(this.list_step1, [scope.$index], {
          ...this.list_step1[scope.$index],
          formatNameQ: undefined,
          formatQ: undefined,
        });
      }
    },
    handleDataConfig(scope) {
      this.configIndex = undefined;
      if (
        [
          "dic",
          "input-date",
          "input-date-range",
          "dept",
          "user",
          "custom",
        ].includes(scope.row.componentType)
      ) {
        this.configIndex = scope.$index;
        this.dataConfigOpenFun(scope.row);
      }
    },
    handleQuHiddenChange(value, row) {
      if (value === "YES") {
        row.ruleValue = undefined;
      }
    },
    handleClickOutside(scope, type) {
      this.$set(this.list_step1, [scope.$index], {
        ...this.list_step1[scope.$index],
        [`isShow${type}`]: false,
      });
    },
    handleInputEdit(scope, type) {
      if (type === "ruleValue" && scope.row.quHidden !== "NO") return;
      this.$set(this.list_step1, [scope.$index], {
        ...this.list_step1[scope.$index],
        [`isShow${type}`]: true,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.queryCriteria {
  .ghost {
    opacity: 0.4;
  }

  .table {
    margin-top: 10px;

    .tr_txt {
      margin: 0;
      height: 36px;
      line-height: 36px;
    }

    .clickoutsideClass {
      position: relative;
    }

    ::v-deep .el-table .cell {
      overflow: visible;
    }

    .tableInputRules {
      // display: inline-block;
      border-radius: 4px;
      padding: 8px 12px;
      color: #fff;
      background-color: #f56c6c;
      pointer-events: auto;
      position: absolute;
      z-index: 999;
      top: -60px;
      left: 50%;
      transform: translateX(-50%);
      min-width: 100%;
    }

    ::v-deep .el-icon-s-operation {
      font-size: 24px;
      cursor: move;
    }

    ::v-deep .header {
      display: flex;
      align-items: center;
      justify-content: center;

      .require {
        color: red;
        margin-top: 8px;
        margin-right: 3px;
        font-size: 18px;
      }

      .el-icon-edit-outline {
        font-size: 18px;
        margin-right: 5px;
      }
    }
  }

  .isData {
    position: relative;

    &::after {
      content: "";
      display: inline-block;
      width: 5px;
      height: 5px;
      background: red;
      border-radius: 50%;
      position: absolute;
      top: -3px;
      right: -2px;
    }
  }
}
</style>